<template>
  <div>
    <!-- 搜索栏 -->
    <search-bar :options="searchBarOptions" style="padding-top:0;" />

    <!--分割线-->
    <div class="line"></div>

    <!-- 表格栏 -->
    <div class="table-box">
      <!--tab栏-->
      <div class="el_table_div" style="padding:10px 0 0;">
        <el-tabs v-model="activeName" @tab-click="switchTab">
          <el-tab-pane
            v-for="(item, index) in optionsTabByPartner"
            :key="index"
            :name="String(item.value)"
            v-if="!item.disabled"
            :label="item.label"
          >
          </el-tab-pane>
        </el-tabs>
      </div>
      <!--表格-->
      <fast-table :options="fastTableOptions" :data="page.records" />
      <!-- 分页 -->
      <pagination
        :total="page.total"
        :current="page.current"
        :size="page.size"
        @changePageSize="changePageSize"
        @changePageNum="changePageNum"
      />
    </div>

    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="auditDialog"
      :title="$t('m.auditResult')"
      width="520px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="el_dialog_center">
          <div class="select_radio">
            <div
              class="select_radio_div"
              style="width: inherit;min-width:110px;"
              v-for="item in selectList"
              :key="item.value"
              :class="{
                select_radio_div2: item.value == 2,
                select_radio_active: withdtawItem.state == item.value
              }"
              @click="changeRadio(item)"
            >
              <div class="select_radio_div_text">{{ item.label }}</div>
              <img
                :src="
                  withdtawItem.state == item.value
                    ? require('@/assets/imgs/work/ic_selected.svg')
                    : require('@/assets/imgs/work/ic_unselected@2x.png')
                "
                alt=""
                width="14px"
                height="14px"
              />
            </div>
          </div>
        </div>
        <div class="dialog_content1">
          <el-form
            style="width:100%"
            ref="withdtawItem"
            :model="withdtawItem"
            :rules="rules"
          >
            <el-form-item prop="remark">
              <el-input
                v-model="withdtawItem.remark"
                clearable
                :placeholder="$t('m.Audit_remarks')"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6 }"
                maxlength="200"
                show-word-limit
                style="width:100%"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="auditDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="submitClick" class="cancel_btn confirm_btn">{{
          $t('m.save')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import page from '@/mixins/page'
import FastTable from '@/components/fast-table.vue'
import SearchBar from '@/components/search-bar.vue'
import pagination from '@/components/pagination.vue'

export default {
  components: { FastTable, SearchBar, pagination },
  mixins: [page],
  data () {
    return {
      fastTableOptions: {
        columns: [
          {
            label: this.$t('m.serialNumber'),
            prop: 'orderNo',
            formatter: row => this.$format.strFormat(row.orderNo)
          },
          {
            label: this.$t('m.Partner'),
            prop: 'type',
            formatter: row =>
              this.$format.strFormat(
                this.$format.stateFormat(row.type, this.optionsTabByPartner)
              )
          },
          {
            label: this.$t('m.Partner_name'),
            prop: 'name',
            formatter: row => this.$format.strFormat(row.name)
          },
          {
            label: this.$t('m.Shop_Details_Contact'),
            prop: 'phone',
            formatter: row => this.$format.phoneFormat(row.phone, row.code)
          },
          {
            label: this.$t('m.applyWithdrawalAmounts'),
            prop: 'amount',
            formatter: row => this.$format.amountFormat(row.amount)
          },
          {
            label: this.$t('m.Finance_Withdrawal_date'),
            prop: 'createTime',
            formatter: row => this.$format.dateformat(row.createTime)
          },
          {
            operate: true,
            showcolumn: this.permissionsId(191) && this.getUserType() == 1,
            display: 'title',
            actions: [
              {
                label: this.$t('m.Review'),
                permission: row => true,
                click: row => this.auditBtn(row)
              }
            ]
          }
        ]
      },
      params: {
        // 状态：0-申请中 1-通过 2-拒绝
        state: '0',
        // 类型: 2-代理 3-业务员 4-网点
        type: ''
      },
      activeName: '',
      auditDialog: false,

      withdtawItem: {
        id: '',
        remark: '',
        state: 1
      },

      rules: {
        remark: [
          {
            required: true,
            message: this.$t('m.cannotBlank'),
            trigger: ['blur', 'change']
          }
        ]
      },

      // 	类型: 2-代理 3-业务员 4-网点
      optionsTabByPartner: [
        { value: '', disabled: false, label: this.$t('m.all') },
        { value: '4', disabled: false, label: this.$t('m.Merchant_') },
        {
          value: '2',
          disabled: this.getAgentLevel() == 2,
          label: this.$t('m.Franchisee2')
        }
      ],
      selectList: [
        { value: 1, label: this.$t('m.branch_Pass'), disabled: true },
        { value: 2, label: this.$t('m.branch_Reject'), disabled: false }
      ]
    }
  },
  watch: {
    'params.type' (newval, oldval) {
      // 代码实现
      // console.log(newval);
      if (newval == '' || newval == 0) {
        this.activeName = '0'
      }
    }
  },
  created () {
    this.getSearchBar()
    this.getPage()
  },
  methods: {
    getSearchBar () {
      this.searchBarOptions = {
        search: this.search,
        bars: [
          {
            value: '',
            type: 'input',
            prop: 'search',
            placeholder: [
              this.$t('m.serialNumber'),
              this.$t('m.Partner_name'),
              this.$t('m.Shop_Details_Contact')
            ].join(' / ')
          },
          {
            value: '',
            type: 'datePicker',
            prop: 'rangeTime',
            label: this.$t('m.Finance_Withdrawal_date')
          }
        ]
      }
    },

    getPage () {
      this.$api.finance.getWithdrawList(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    },

    switchTab (tab) {
      this.params.type = tab.name == 0 ? '' : tab.name
      this.page = this.$options.data.call(this).page
      this.getPage()
    },

    auditBtn (item) {
      this.auditDialog = true
      this.withdtawItem.id = item.id
      this.withdtawItem.remark = ''
      this.withdrawsAudit.state = 1
    },

    submitClick () {
      this.$refs.withdtawItem.validate(valid => {
        if (!valid) {
          return
        } else {
          this.auditDialog = false
          this.withdrawsAudit()
        }
      })
    },

    withdrawsAudit () {
      this.$api.withdraw.withdrawsAudit(this.withdtawItem).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.getPage()
          this.auditDialog = false
        } else {
          this.$message.error(res.message)
        }
      })
    },

    changeRadio (items) {
      this.withdtawItem.state = items.value
    }
  }
}
</script>
<style scoped lang="scss"></style>
